<template>
  <div :style="moduleMain">
    <div :style="homemainbox">
      <div :style="setupbox1">
        <div :style="setuptitlebox">甲醛浓度报警统计</div>
        <div id="type0" :style="echartsdiv"></div>
      </div>
      <div :style="setupbox2">
        <div :style="setuptitlebox">SO2气体报警统计</div>
        <div id="type1" :style="echartsdiv"></div>
      </div>
      <br />
      <div :style="setupbox3">
        <div :style="setuptitlebox">H2S气体报警统计</div>
        <div id="type2" :style="echartsdiv"></div>
      </div>
      <div :style="setupbox4">
        <div :style="setuptitlebox">CL2气体报警统计</div>
        <div id="type3" :style="echartsdiv"></div>
      </div>
      <br />
      <div :style="setupbox5">
        <div :style="setuptitlebox">HCL气体报警统计</div>
        <div id="type4" :style="echartsdiv"></div>
      </div>
      <div :style="setupbox6">
        <div :style="setuptitlebox">烟雾浓度报警统计</div>
        <div id="type5" :style="echartsdiv"></div>
      </div>
    </div>
  </div>
</template>

<script>
import swal from "sweetalert";
import echarts from "echarts";
export default {
  name: "alertparametersetup",
  mounted() {
    this.sessionId = this.$route.query.username;
    this.getAlertList();
  },
  methods: {
    showecharts: function (typediv, type) {
      let typ = echarts.init(document.getElementById(typediv));
      const alertNum = [];
      const alertCount = [];
      for (var i = 0; i < type.length; i++) {
        alertNum[i] = type[i].alertNum * 3 + "分钟";
        alertCount[i] = type[i].alertCount;
      }
      typ.setOption({
        title: {
          text: "处理报警的时间，统计次数",
          x: "center",
          textStyle: {
            color: "#AAAAAA",
            fontSize: "14",
          },
          textAlign: "left",
        },
        grid: {
          x: 40,
          y: 30,
          x2: 0,
          y2: 20,
        },
        tooltip: {
          formatter(params) {
            return params.name + "处理报警，次数是:" + params.data;
          },
          textStyle: {
            color: "#AAAAAA",
            fontSize: "12",
          },
        },
        xAxis: {
          data: alertNum,
          axisLabel: {
            textStyle: {
              color: "#AAAAAA",
            },
          },
        },
        yAxis: {
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: "#AAAAAA",
            },
          },
        },
        series: [
          {
            name: "处理报警的时间，统计次数",
            data: alertCount,
            barMaxWidth: 30,
            barMinWidth: 10,
            type: "bar",
          },
        ],
      });
    },
    getAlertList: function () {
      let paramsData = {
        sessionId: this.sessionId,
      };
      this.axios
        .get(
          process.env.VUE_APP_BASE_API +
            "/monitor-alertcount/alertcount/getAlertCount",
          {
            params: {
              ...paramsData,
            },
          }
        )
        .then((response) => {
          if (response.data.list !== "") {
            for (let i = 0; i < response.data.list.length; i++) {
              switch (response.data.list[i].alertType) {
                case 0:
                  this.type0.push(response.data.list[i]);
                  break;
                case 1:
                  this.type1.push(response.data.list[i]);
                  break;
                case 2:
                  this.type2.push(response.data.list[i]);
                  break;
                case 3:
                  this.type3.push(response.data.list[i]);
                  break;
                case 4:
                  this.type4.push(response.data.list[i]);
                  break;
                case 5:
                  this.type5.push(response.data.list[i]);
                  break;
              }
            }
          }
          this.showecharts("type0", this.type0);
          this.showecharts("type1", this.type1);
          this.showecharts("type2", this.type2);
          this.showecharts("type3", this.type3);
          this.showecharts("type4", this.type4);
          this.showecharts("type5", this.type5);
        })
        .catch((error) => {
          if (error.response.status === 401) {
            swal({
              title: "提示",
              text: "页面过期请重新登录",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          } else if (error.response.status === 402) {
            swal({
              title: "提示",
              text: "非法访问强制退出",
              icon: "warning",
              button: "确定",
            }).then(() => {
              this.$router.push({ path: "/" });
            });
          }
        });
    },
  },
  data() {
    return {
      sessionId: "",
      type0: [],
      type1: [],
      type2: [],
      type3: [],
      type4: [],
      type5: [],
      echartsdiv: {
        marginTop: "11px",
        width: "494px",
        height: "136px",
      },
      moduleMain: {
        position: "absolute",
        width: "1000px",
        height: "450px",
        marginLeft: "200px",
        top: "0px",
      },
      homemainbox: {
        position: "relative",
        width: "1000px",
        height: "450px",
      },
      setupbox1: {
        position: "absolute",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/10.png") + ")",
        width: "500px",
        height: "150px",
        marginTop: "0px",
      },
      setupbox2: {
        position: "absolute",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/10.png") + ")",
        width: "500px",
        height: "150px",
        marginTop: "0px",
        marginLeft: "520px",
      },
      setupbox3: {
        position: "absolute",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/10.png") + ")",
        width: "500px",
        height: "150px",
        marginTop: "151px",
      },
      setupbox4: {
        position: "absolute",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/10.png") + ")",
        width: "500px",
        height: "150px",
        marginTop: "151px",
        marginLeft: "520px",
      },
      setupbox5: {
        position: "absolute",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/10.png") + ")",
        width: "500px",
        height: "150px",
        marginTop: "303px",
      },
      setupbox6: {
        position: "absolute",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
        backgroundImage: "url(" + require("@/assets/img/10.png") + ")",
        width: "500px",
        height: "151px",
        marginTop: "303px",
        marginLeft: "520px",
      },
      setuptitlebox: {
        position: "absolute",
        fontSize: "13px",
        width: "145px",
        height: "15px",
        marginLeft: "55px",
        textAlign: "center",
        lineHeight: "10px",
        color: "#E7EC92",
        // border: '1px solid #F00'
      },
    };
  },
};
</script>

<style>
span:hover {
  color: #85c5e8 !important;
}
span {
  cursor: pointer !important;
}
button:focus,
input::-moz-focus-inner,
button::-moz-focus-inner {
  outline: 0;
}
button:hover {
  background-color: #87cdf1;
}
button:active {
  background-color: #006699;
}
button {
  cursor: pointer !important;
  background-color: #3ba4ef;
  color: #ffffff;
  border-radius: 5px;
  border: none;
  outline: 0;
}
</style>
